<template>
	<!-- 根据节数来动态创建不同的节数选择时间 -->
	<view class="content">
		<view class="select">
			<view class="select_item" v-for="(item,index) in Lists" :key="index">
				<view class="select_item_left">
					{{item.prtchName}}
				</view>
				<view class="select_item_right" @click="showdate(index)">
					<view :class="{font_color: item.selectName != '请选择'}">{{item.selectName}}</view>
					<i class='iconfont icon-fanhui'></i>
				</view>
			</view>
		</view>
		<date ref="date" :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm"></date>
	</view>
</template>
<script>
	import date from '@/components/date/date.vue';
	export default {
		data() {
			return {
				pickerValueDefault: [0, 0],
				prtch: ['第一节', '第二节', '第三节', '第四节', '第五节', '第六节', '第七节', '第八节'],
				Lists: [],
				time_quantum: [], // 存储用户选择的时段
				prtchnum: 4,
				select_index: '',
			}
		},
		components: {
			date
		},
		onNavigationBarButtonTap() {
			// 1. 保存后，后退到创建课表
			// 2. 确保要选择所有时间段才可以进行创建时间段
			let isAlltime = this.Lists.some(item => {
				return item.selectName === '请选择'
			})
			if (isAlltime) {
				return uni.showToast({
					title: '请填写所有时段',
					icon: 'none'
				})
			}
			// 1. 将用户选择的时段放到缓存中，以便后退到[创建课表]可以拿到时段
			// 2. 将上课时间显示已保存状态，所以需要进行isTimeQuantum缓存为True
			// 3. 开始后退
			uni.setStorageSync('time_quantum', this.time_quantum)
			uni.setStorageSync('isTimeQuantum', true) 
			uni.navigateBack()
		},
		onLoad(e) {
			let weekId = e.weekid
			// 根据传递过来的节数来创建对应的选择时段数量
			this.prtchnum = e.prtchnum;
			for (let i = 0; i < this.prtchnum; i++) {
				this.Lists.push({
					prtchName: this.prtch[i],
					selectName: '请选择',
				})
				// 请求创建时段所需要的参数
				this.time_quantum.push({
					timeName: this.prtch[i], // 第几节
					timeStart: '', // 存储用户选择的开始时段
					timeEnd: '',// 存储用户选择的结束时段
				})
			}
		},
		methods: {
			// 显示时间段，并获取当前时间段的索引
			showdate(index) {
				this.$refs.date.show()
				this.select_index = index;
			},
			
			// 监听选择时间段
			onConfirm(e) {
				this.Lists[this.select_index].selectName=e.start_time+'-'+e.end_time;
				this.time_quantum[this.select_index].timeStart = e.start_time
				this.time_quantum[this.select_index].timeEnd = e.end_time
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 100%;
		position: absolute;
		background: rgba(250, 250, 250, 1);
	}

	.select {
		width: 100%;
		background: rgba(255, 255, 255, 1);
	}

	.select_item {
		width: 92%;
		height: 92upx;
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid rgba(229, 229, 229, 1);
	}

	.select_item_left {
		width: 50%;
		font-size: 32upx;
		color: rgba(51, 51, 51, 1);
	}

	.select_item_right {
		width: 50%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font: 32upx;
		color: rgba(204, 204, 204, 1);
	}

	.select_item_right i {
		font-size: 18upx;
		margin-left: 10upx;
		color: #C2C2C2;
	}

	.select_item:last-child {
		border-bottom: none;
	}

	.picker {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.font_color {
		color: #333333;

	}
</style>
